<template>
  <view class="dialog-container">
    <view 
      class="dialog-bubble" 
      :class="[aiType, { 'bubble-show': show, 'bubble-thinking': isThinking }]"
      :style="bubbleStyle"
    >
      <view class="bubble-content">
        <text class="bubble-text">{{ content }}</text>
        <view class="thinking-dots" v-if="isThinking">
          <view class="dot" v-for="i in 3" :key="i" :class="{ 'dot-active': thinkingStep >= i }"></view>
        </view>
      </view>
    </view>
    
    <view class="ai-avatar" :class="[aiType, { 'avatar-thinking': isThinking }]">
      <image :src="aiAvatar" class="avatar-img" mode="aspectFill"></image>
      <view class="avatar-emotion" v-if="emotion">
        <text class="emotion-icon">{{ emotion }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AIDialogBubble',
  props: {
    aiType: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    aiAvatar: {
      type: String,
      default: '/static/ai-avatar.png'
    },
    emotion: {
      type: String,
      default: ''
    },
    isThinking: {
      type: Boolean,
      default: false
    },
    thinkingStep: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false,
      animation: null
    }
  },
  computed: {
    bubbleStyle() {
      return {
        opacity: this.show ? 1 : 0,
        transform: this.show ? 'translateY(0)' : 'translateY(20rpx)'
      }
    }
  },
  mounted() {
    this.showBubble()
  },
  methods: {
    showBubble() {
      // 延迟显示，模拟思考间隔
      setTimeout(() => {
        this.show = true
        this.playBubbleAnimation()
      }, 300)
    },
    
    playBubbleAnimation() {
      // 气泡出现动画
      const animation = uni.createAnimation({
        duration: 500,
        timingFunction: 'ease-out'
      })
      
      animation.translateY(0).opacity(1).step()
      this.animation = animation
    },
    
    updateEmotion(newEmotion) {
      this.emotion = newEmotion
      // 表情变化动画
      this.playEmotionAnimation()
    },
    
    playEmotionAnimation() {
      const animation = uni.createAnimation({
        duration: 200,
        timingFunction: 'ease-in-out'
      })
      
      animation.scale(1.2).step()
      animation.scale(1).step()
      this.animation = animation
    }
  }
}
</script>

<style scoped>
.dialog-container {
  display: flex;
  align-items: flex-end;
  margin: 20rpx 0;
  position: relative;
}

.dialog-bubble {
  max-width: 70%;
  padding: 20rpx 24rpx;
  border-radius: 24rpx;
  margin-right: 16rpx;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.dialog-bubble.bubble-show {
  animation: bubbleAppear 0.5s ease-out;
}

.dialog-bubble.bubble-thinking {
  animation: thinkingPulse 2s infinite;
}

/* AI类型气泡样式 */
.dialog-bubble.ai-good {
  background: linear-gradient(135deg, rgba(76, 217, 100, 0.9), rgba(52, 199, 89, 0.9));
  border: 2rpx solid rgba(76, 217, 100, 0.3);
}

.dialog-bubble.ai-bad {
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.9), rgba(255, 69, 58, 0.9));
  border: 2rpx solid rgba(255, 59, 48, 0.3);
}

.dialog-bubble.ai-fair {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.9), rgba(0, 123, 255, 0.9));
  border: 2rpx solid rgba(0, 122, 255, 0.3);
}

.dialog-bubble.ai-psychological {
  background: linear-gradient(135deg, rgba(88, 86, 214, 0.9), rgba(99, 102, 241, 0.9));
  border: 2rpx solid rgba(88, 86, 214, 0.3);
}

.dialog-bubble.ai-vengeful {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.9), rgba(255, 159, 10, 0.9));
  border: 2rpx solid rgba(255, 149, 0, 0.3);
}

.bubble-content {
  position: relative;
}

.bubble-text {
  color: white;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

/* 思考动画点 */
.thinking-dots {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 12rpx;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.dot-active {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* AI头像 */
.ai-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.ai-avatar.avatar-thinking {
  animation: avatarThinking 1.5s infinite;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* AI类型头像边框 */
.ai-avatar.ai-good {
  border-color: rgba(76, 217, 100, 0.5);
}

.ai-avatar.ai-bad {
  border-color: rgba(255, 59, 48, 0.5);
}

.ai-avatar.ai-fair {
  border-color: rgba(0, 122, 255, 0.5);
}

.ai-avatar.ai-psychological {
  border-color: rgba(88, 86, 214, 0.5);
}

.ai-avatar.ai-vengeful {
  border-color: rgba(255, 149, 0, 0.5);
}

/* 表情图标 */
.avatar-emotion {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid rgba(0, 0, 0, 0.1);
  animation: emotionBounce 0.6s ease-out;
}

.emotion-icon {
  font-size: 16rpx;
}

/* 动画效果 */
@keyframes bubbleAppear {
  0% {
    opacity: 0;
    transform: translateY(20rpx) scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5rpx) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes thinkingPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
  }
}

@keyframes avatarThinking {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
}

@keyframes emotionBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 移动端优化 */
@media (max-width: 768rpx) {
  .dialog-bubble {
    max-width: 75%;
    padding: 16rpx 20rpx;
    margin-right: 12rpx;
  }
  
  .bubble-text {
    font-size: 24rpx;
  }
  
  .ai-avatar {
    width: 60rpx;
    height: 60rpx;
  }
  
  .avatar-emotion {
    width: 24rpx;
    height: 24rpx;
    top: -6rpx;
    right: -6rpx;
  }
  
  .emotion-icon {
    font-size: 12rpx;
  }
}
</style>

